<template>
	<view>
		<uni-nav-bar :fixed="true" :height="60" background-color="#3ACD90" status-bar :border="false" leftWidth="auto">
			<block slot="left">
				<view style="display: flex" class="flex-center">
					<view>
						<view class='flex-chuizhi flex-center'>
							<view class="font-color fbold" style="font-size: 40rpx;">{{ userInfo.real_name }}</view>
							<view class="font-color" style="font-size: 28rpx;">{{ userInfo.phone}}</view>
						</view>
					</view>
					<view style="margin-left:24rpx" @click="visitShow">
						<uni-icons type="shop-filled" size="40" color="#ffffff" />
					</view>
					<view style="margin-left:24rpx" @click="noticeview">
						<uni-icons type="notification" size="40" color="#ffffff" />
					</view>

				</view>
			</block>
		</uni-nav-bar>
		<view class="bg-color" style="height:300rpx"></view>
		<view class="center-box mtlr30">
			<view class="mtlr30" >
				<view class="pt30">
					<view class="center-title">月度业绩总览</view>
				</view>
				<view class="center-mid">
					
					<view class="flex-chuizhi flex-center">
						<view style="font-size: 24rpx;color: #666666;">指标(团队)</view>
						<view style="color: #FF6C2C;">当前职级无指标</view>
						<view class="pt30">
							<mprogress :progress="performance.team_rate"  width=130 valueColor="#FF6C2C" activeColor="#A22EFF"></mprogress>
							
						</view>
						<view class="pt30">本月当前积分</view>
						<view class="fbold">{{ performance.team_reward_points }}</view>
					</view>
					<view class="vertical-divider"></view>
					<view class="flex-chuizhi flex-center">
						<view style="font-size: 24rpx;color: #666666;">指标(个人)</view>
						<view style="color: #FF6C2C;">当前职级无指标</view>
						<view class="pt30">
							<mprogress :progress="performance.rate"  width=130 valueColor="#FF6C2C" activeColor="#2D7FFB"></mprogress>
						</view>
						<view class="pt30">本月当前积分</view>
						<view class="fbold">{{ performance.reward_points}}</view>
						
					</view>
					
				</view>
				<view class="pt30">
					<button size="default" type="default"
						style="color:#ffffff;background-color:#3ACD90;font-weight: bold;"
						hover-class="is-hover" @click="checkmingxi">查看业绩明细</button>
					
				</view>
			</view>
		</view>
		<view class="center-second mtlr30">
			<view class="mtlr30" >
				<view class="pt30">
					<view class="center-title">历史业绩趋势</view>
				</view>
				<view style="height: 400rpx;">
					<zhexian :chartData="chartData" ></zhexian>
				</view>
				<view>
					<view style="display: flex;align-items: center;">
						<view style="color:#666666;font-size: 24rpx;">年度累计（团队）</view>
						<view class="fbold" style="margin-left: 48rpx;">{{ chartData.teamyearmoney }}</view>
					</view>
					<view style="display: flex;align-items: center;">
						<view style="color:#666666;font-size: 24rpx;">年度累计（个人）</view>
						<view  class="fbold" style="margin-left: 48rpx;">{{ chartData.personyearmoney }}</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="center-second mtlr30">
			<view class="mtlr30" >
				<view class="pt30" style="display: flex;justify-content: space-between;">
					<view class="center-title">团队业绩龙虎榜</view>
					<view style="display: flex;">
						<view @click="teamAll" class="fbold" style="color:#3ACD90;font-size: 30rpx;">查看全部</view>
						<uni-icons type="right" color="#3ACD90"></uni-icons>
					</view>
				</view>
				<view class="pt30 sell-order" v-for="(item,index) in teamList" :key="index">
					<view :style="index === 0?'width:30rpx':''" class="orderOne numSize fbold">{{ index+1 }}</view>
					<view>{{ item.business.real_name }}</view>
					<!-- <view>{{item.department}}</view> -->
					<view class="fbold">{{item.team_reward_points}}</view>
				</view>

			</view>
		</view>
		<view class="center-second mtlr30">
			<view class="mtlr30" >
				<view class="pt30" style="display: flex;justify-content: space-between;">
					<view class="center-title">个人业绩龙虎榜</view>
					<view  style="display: flex;">
						<view @click="personAll" class="fbold" style="color:#3ACD90;font-size: 30rpx;">查看全部</view>
						<uni-icons type="right" color="#3ACD90"></uni-icons>
					</view>
					
				</view>
				<view class="pt30 sell-order" v-for="(item,index) in personList" :key="index">
					
					<view :style="index === 0?'width:30rpx':''" class="orderOne numSize fbold">{{ index + 1}}</view>
					<view>{{ item.business.real_name }}</view>
					<!-- <view>{{item.department}}</view> -->
					<view class="fbold">{{item.reward_points}}</view>
				</view>
				
			</view>
		</view>
		<view style="margin-top: 300rpx;width: 1rpx;height: 1rpx;"></view>
		
		<visitShopForm ref="childRef"></visitShopForm>
	</view>
	
</template>

<script>
	import zhexian from '@/components/zhexian.vue'
	import mprogress from '@/components/m-progress/mprogress.vue'
	import visitShopForm from '@/components/visitShopForm.vue'
	
	import {
		targetInfo,
		targetEcharts,
		getRankList,
	} from "@/common/apis/other.js"
  import {getPerformance} from "../../common/apis/other";
	
	export default {
		components:{
			mprogress,
			zhexian,
			visitShopForm
		},
		data() {
			return {
        performance: {},
				userInfo : '',
				teamInfo:{
					dachenglv:0
				},
				personInfo:{
					dachenglv:6
				},
				chartData:{},
				teamList:[],
				personList:[],
				
				teamGainRewardPoints:0,
				personGainRewardPoints:0,
				
				
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userinfo')
      this.getPerformance()
			targetInfo().then(res => {
				console.log(res)
				let result = res.data
				this.personGainRewardPoints = result.month.gainRewardPoints
				
			})
			targetInfo({query_team:1}).then(res => {
				console.log(res)
				let result = res.data
				this.teamGainRewardPoints = result.month.gainRewardPoints
				
			})
			targetEcharts().then(res=>{
				console.log(res)
				let data = res.data
				
				
				// 提取数据
				const personAmount = data.person.amount.map(Number);
				const teamAmount = data.team.amount.map(Number);
				
				// 构建 categories，去掉年份部分，只保留月份部分
				const categories = data.person.date.map(date => date.split('-')[1]);

				// 构建 series
				const series = [
				  {
				    name: "团队",
				    data: teamAmount
				  },
				  {
				    name: "个人",
				    data: personAmount
				  }
				];
				
				// 构建最终的 charts 对象
				this.chartData = {
				  categories: categories,
				  series: series,
				  teamyearmoney: data.team.total,
				  personyearmoney: data.person.total
				};
				
			})
			
			getRankList().then(res=>{
				console.log('res',res)
				if(res.status == 200){
					this.personList = res.data.person
					this.teamList = res.data.team
				}
			})
			
		},
		methods: {

      getPerformance() {
        getPerformance().then(res=>{
          console.log('res',res)
          this.performance = res.data
          if (this.performance) {
            this.performance.team_rate = this.performance.team_reward_points / this.performance.team_target * 100
            this.performance.rate = this.performance.reward_points / this.performance.target * 100
          }
          console.log(this.performance)
        })
      },

			visitShow() {
			    this.$refs.childRef.toggle();
			},
			checkmingxi(){
				this.$Router.push({
					path: '/pages/other/gerenmingxi'
				})
				
			},
			teamAll(){
				this.$Router.push({
					path: '/pages/other/teamyeji',
				})
			},
			personAll(){
				this.$Router.push({
					path: '/pages/other/personyeji',
				})
			},
			noticeview(){
				this.$Router.push({
					path: '/pages/other/notice'
				})
			}
			
		}
	}
</script>

<style scoped>
.center-box{
	height: 100%;
	background-color: #ffffff;
	margin-top: -270rpx;
	border-radius: 20rpx;
	padding-bottom: 80rpx;
	
}
.center-title{
	font-size: 40rpx;
	font-weight: bold;
}

.center-mid{
	display: flex; 
	padding-top: 30rpx;
	justify-content: space-between;
	align-items: center;
}
.vertical-divider {
  width: 2rpx; 
  height: 430rpx; 
  background-color: #ccc; 
  margin: 0 20rpx;
}

.center-second{
	margin-top: 20rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding-bottom: 40rpx;
}
.sell-order{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.orderOne{
	color:#FE3837
}

.orderTwo{
	color:#A84A07
}

.orderThree{
	color:#006527
}
.numSize{
	font-size:50rpx;
	
}

.vdivider {
  width: 100%; 
  height: 2rpx; 
  background-color: #ccc; 

}
</style>